<template>
  <div>
    setup组件

    <!-- 具名插槽 -->
    <div class="wrapper">
      <slot name="header">
        header插槽
      </slot>
    </div>

    <div class="wrapper">
      <!-- 默认插槽其实name默认是default -->
      <slot name="default">
        {{ count || '默认插槽' }}
      </slot>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, h } from 'vue'

export default {
  props: {
    title: String,
  },
  setup(props, context) {
    console.log('第一个参数：', props)
    console.log('第二个参数：', context)
    const state = reactive({
      count: 1,
    })

    return {
      ...toRefs(state),
    }
  }
}
</script>

<style lang="scss" scoped></style>
